<template>
  <div class="container" ref="mainCon">
    <div class="mainCon">
      <el-row class="searchInputWidth">
        <el-form :inline="true" :model="filterField" ref="listForm">
          <el-col :lg="8" :xl="6">
            <el-form-item label="参建单位" class="row-padding-bottom">
              <el-select
                v-model="filterField.projectCompanyId"
                filterable
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) of companyList"
                  :key="index"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="在职状态" class="row-padding-bottom">
              <el-select
                v-model="filterField.status"
                clearable
                placeholder="请选择"
              >
                <el-option label="在职" value="ON_JOB"></el-option>
                <el-option label="离职" value="DISMISSED"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="人员名称" class="row-padding-bottom">
                <el-input
                  placeholder="请输入姓名或身份证号码"
                  clearable
                  v-model.trim="filterField.keyword"
                ></el-input>
              </el-form-item>
            </el-col>
          </template>
          <el-col :lg="8" :xl="6">
            <el-form-item label="">
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchTable"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <!-- 列表 -->
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          @sort-change="sortChange"
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column label="身份证照片" prop="idcardPhoto">
            <template slot-scope="scope">
              <el-image
                v-if="scope.row.idcardPhoto"
                style="width: 60px; height: 60px"
                :src="scope.row.idcardPhoto"
                :preview-src-list="scope.row.idcardImgList"
              ></el-image>
              <img
                v-else
                src="../../../static/img/employee/idcard.png"
                alt
                width="60px"
                height="60px"
              />
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="name"></el-table-column>
          <el-table-column
            label="身份证号"
            prop="idcard"
            :formatter="formatTd"
            width="180"
          ></el-table-column>
          <el-table-column label="状态" prop="status"></el-table-column>
          <el-table-column label="人员类型" prop="typeName"></el-table-column>
          <el-table-column
            label="录入时间"
            sortable="custom"
            prop="inputDate"
            width="180"
          ></el-table-column>
          <el-table-column label="体征信息" prop="facePhoto">
            <template slot-scope="scope">
              <el-image
                v-if="scope.row.facePhoto"
                style="width: 50px; height: 50px"
                :src="scope.row.facePhoto"
                :preview-src-list="scope.row.faceImgList"
              ></el-image>
              <img
                v-else
                src="../../../static/img/employee/card.png"
                alt
                width="50px"
                height="50px"
              />
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="操作"
            width="100px"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="seeDetail(scope.row.employeeId)"
                >查看</el-link
              >
            </template>
          </el-table-column>

          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageNo="getpageNo"
          @getpageSize="getpageSize"
        ></Pagination>
      </div>
    </div>
  </div>
</template>
<script>
import Pagination from '@/components/publicCom/pagination'
export default {
  name: 'eightEmployee',
  data() {
    return {
      hiddleToolBar: false,
      tableHeight: null,
      advanced: false,
      tableList: [],
      loading: true,
      isShow: false,
      companyList: [],
      filterField: {
        projectId: this.projectId,
        projectCompanyId: '',
        status: '',
        keyword: '',
      },
      pageSize: 20,
      pageNo: 1,
      requestUrl: 'api-e/cs/employee/expand/projectempeight',
      loginType: '',
    }
  },
  components: {
    Pagination,
  },
  props: {
    projectId: {
      type: String,
      required: true,
    },
  },
  created() {
    this.loginType = localStorage.getItem('loginType')
    this.getCompanyList()
  },
  activated() {
    window.addEventListener('scroll', this.handleScroll, true)
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
      this.$refs.tableBox1.doLayout()
    })
  },
  deactivated() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  beforeDestroy() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
    let that = this
    this.$nextTick(function () {
      let tableHeightCur = this.$refs.tableBox1.$el.clientHeight
      let tableTop = this.$refs.tableBox.getBoundingClientRect().top
      if (tableHeightCur + tableTop > window.innerHeight) {
        this.tableHeight =
          this.$refs.mainCon.getBoundingClientRect().height - 86
      } else {
        document.getElementsByClassName('tableBoxCur').length &&
          (document.getElementsByClassName('tableBoxCur')[0].style.height =
            window.innerHeight - tableTop - 40 + 'px')
      }

      window.onresize = function () {
        if (!that.$refs.tableBox1) {
          return
        }
        let tableHeightCur = that.$refs.tableBox1.$el.clientHeight
        let tableTop = that.$refs.tableBox.getBoundingClientRect().top
        if (tableHeightCur + tableTop > window.innerHeight) {
          that.tableHeight =
            that.$refs.mainCon.getBoundingClientRect().height - 86
        } else {
          document.getElementsByClassName('tableBoxCur').length &&
            (document.getElementsByClassName('tableBoxCur')[0].style.height =
              window.innerHeight - tableTop - 40 + 'px')
        }
      }
    })
  },
  methods: {
    //参建单位
    getCompanyList() {
      this.axios({
        method: 'post',
        url: 'api-p/projectcompany/expand/findprojectcompany',
        data: {
          projectId: this.filterField.projectId,
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.companyList = res.data.result
          } else {
            this.$message.error('参建单位数据获取失败')
          }
        })
        .catch((error) => {
          this.$message.error('参建单位数据获取失败')
        })
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    handleScroll(e) {
      this.$nextTick(function () {
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop = e.target.scrollTop
        if (
          this.$refs.tableBox &&
          this.$refs.tableBox.getBoundingClientRect().top < 128
        ) {
          this.tableHeight = window.innerHeight - 238
          if (document.getElementsByClassName('tableBoxCur').length) {
            document.getElementsByClassName('tableBoxCur')[0].style.height =
              null
          }
          this.hiddleToolBar = true
        } else {
          this.hiddleToolBar = false
        }
      })
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getTableList(data) {
      this.loading = false
      if (data.length < 1) {
        this.isShow = true
      } else {
        this.isShow = false
        let idcardImgList = []
        let faceImgList = []
        for (var i = 0; i < data.length; i++) {
          idcardImgList.push(data[i].idcardPhoto)
          faceImgList.push(data[i].facePhoto)
        }

        for (var i = 0; i < data.length; i++) {
          var container = idcardImgList
          var frontArr = container.slice(0, i)
          var behindArr = container.slice(i, data.length)
          var list = behindArr.concat(frontArr)
          data[i].idcardImgList = list
        }
        for (var i = 0; i < data.length; i++) {
          var container = faceImgList
          var frontArr = container.slice(0, i)
          var behindArr = container.slice(i, data.length)
          var list = behindArr.concat(frontArr)
          data[i].faceImgList = list
        }
      }
      this.tableList = data
    },
    //列表查询
    searchTable() {
      this.pageSize = 20
      this.pageNo = 1
      this.filterField.projectId = this.projectId
      this.$refs.pagination.getTableListData()
    },
    //查看员工明细
    seeDetail(id) {
      this.$router.push({
        path: '/home/employee/employeeInfoC',
        name: 'employeeInfoC',
        query: {
          employeeId: id,
          projectId: this.filterField.projectId,
          path: 'projectEmployeeList',
        },
      })
      //（建筑端）企业端/项目端的项目花名册-查看详情
      if (this.loginType === 'QY' || this.loginType === 'XM') {
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/employee/projectEmployeeQY',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/employee/employeeTotalListJC',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
  },
}
</script>
<style lang="less" scoped>
.mainCon {
  // padding-top: 0;
}
@import '../../../static/css/filterArea.less';
</style>
